import {Icon, Style} from "ol/style";

export default {
  data() {
    return {
      styleImage: {
        anchor: [0.5, 0.5],
        anchorOrigin: 'bottom-right',
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        offsetOrigin: 'top-left',
        scale: 1,
        offset: [0, 0],
      }
    }
  },
  methods: {
    isObject(value) {
      return Object.prototype.toString.call(value).toLowerCase() === '[object object]'
    },
    isArray(value) {
      return Object.prototype.toString.call(value).toLowerCase() === '[object array]'
    },
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        let r = Math.random() * 16 | 0;
        let v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    /**
     * 添加标记点列表（感知源等）
     * @param options {Object:{}}
     */
    drawMarkers(options) {
      let {layerId = 'markerLayer', lists, param} = options
      if (!lists.length) {
        return false;
      }
      let MarkerLayer = this.gisIns.getLayer(layerId)
      if (!MarkerLayer) {
        // 创建图层
        MarkerLayer = this.gisIns.createVector({
          zIndex: 100,
          style: (feature) => {
            return new Style({
              image: new Icon({
                ...this.styleImage,
                src: feature.get('icon'),
              })
            })
          }
        }, layerId)
      }

      let layerSource = MarkerLayer.getSource()
      if (param.clear) {
        layerSource.clear()
      }
      if (param.clearOwnLayer) {
        layerSource.clear()
      }

      let Features = lists.map((item, index) => {
        return this.gisIns.createPoint(item.lng || '', item.lat || '', {
          pointer: true,
          id: `${param.type || item.customAlarmType}_${item.id}`,
          type: param.type || item.customAlarmType,
          icon: item.icon || param.icon,
          data: item
        })
      })

      this.gisIns.addIconArrFeatures(layerId, Features)
      // 先隐藏，只显示显示聚合图层
      MarkerLayer.setVisible(false)
      // 聚合
      this.createMapAggregation(Features, {
        layerId: 'clusterSourceLayer',
        targetId: layerId
      })
    },
    /**
     * 添加单个标记点（感知源等）
     * @param options {Object:{}}
     */
    drawMarker(options) {
      let {layerId = 'MarkerLayer', data, param} = options

      let MarkerLayer = this.gisIns.getLayer(layerId)
      if (!MarkerLayer) {
        MarkerLayer = this.gisIns.createVector({zIndex: 100}, layerId)
      }
      let layerSource = MarkerLayer.getSource()
      if (param.clear) {
        layerSource.clear()
      }
      if (param.clearOwnLayer) {
        layerSource.clear()
      }

      let curItem = layerSource.getFeatureById(`${param.type || data.customAlarmType}_${data.id}`)
      if (curItem) {
        layerSource.removeFeature(curItem);
      }
      if (!data.lng || !data.lat) {
        return false;
      }
      let marker = this.gisIns.addPoint(layerId, data.lng, data.lat, {
        pointer: true,
        id: `${param.type || data.customAlarmType}_${data.id}`,
        type: param.type || data.customAlarmType,
        icon: data.icon || param.icon,
        data: data
      })

      // 标记点坐标
      let coordinate = marker.getGeometry().getCoordinates()
      // 标记点弹窗处理 (overlay-utils-mixins.js)
      this.showMarkerOverlay({
        self: this,
        feature: marker,
        coordinate: coordinate,
        type: 'item',
        data: data
      })
      // 跳转中心点 (view-utils-mixins.js)
      this.toMapCenter(coordinate)
      // if (marker.get('customAlarmType') === 'car') {
      //   this.showCarAlarmOverlay(marker)
      // } else if (marker.get('customAlarmType') === 'face') {
      //   this.showFaceAlarmOverlay(marker)
      // } else if (marker.get('customAlarmType') === 'imsi') {
      //   this.showImsiAlarmOverlay(marker)
      // }
    },
    /**
     * 画区域(圆形)
     * @param layerid {String} 图层id
     * @param center {Object} 中心点 {lng,lat}
     * @param radius {String} 区域的唯一id
     * @param id {String} 区域的唯一id
     * @param name {String} 区域名称
     */
    drawMapCircle({layerid, center, radius, id, name}) {
      let CircleFeature = this.gisIns.addCircle(this.gisIns.getLayer(layerid), {
        center: center,
        radius: this.gisIns.meterToRadiusDegrees(radius),
      })
      CircleFeature.setId(id)
      CircleFeature.set('name', name)
      // if (center) {
      //   this.map.getView().animate({
      //     // 只设置需要的属性即可
      //     // 中心点
      //     center: this.gisIns.transform(center[0], center[1]),
      //     // zoom: 12, // 缩放级别
      //     duration: 300 // 缩放持续时间，默认不需要设置
      //   })
      // }
    },
    /**
     * 根据图层和id删除Feature
     * @param layerid {String} 图层id
     * @param id {String} 区域的唯一id
     */
    delMapFeature({layerid, id}) {
      let arealayer = this.gisIns.getLayer(layerid)
      let areaSource = arealayer.getSource()
      let areaFeature = areaSource.getFeatureById(id)
      if (areaFeature) {
        areaSource.removeFeature(areaFeature);
      }
    }
  }
}
